<template>
    <div>
        search--
        <br>
        num={{num}}
        <br>
        count={{count}}
        <br>
        {{age}}
    </div>
</template>
<script>
import { reactive, toRefs, watch } from 'vue'
// 1.watchEffect
// export default{
//   setup(){
//    let data = reactive({
//        num:1,
//        count:1
//    })
//    watchEffect(()=>{
//        console.log(`num=${data.num}`)
//    })
//    setInterval(()=>{
//        data.count++
//    },1000)
//    return {
//        ...toRefs(data)
//    }
//   }
// }
// 2.warch
export default{
  setup(){
   let data = reactive({
       num:1,
       count:1
   })
   let userinfo = reactive({
       username:"",
       age:1
   })
  watch(data,()=>{
      console.log(`data.num=${data.num}`)
  })
   setInterval(()=>{
    //    data.num++
    userinfo.age++
   },1000)
   return {
       ...toRefs(data),
       ...toRefs(userinfo)
   }
  }
}

</script>
